<script setup>
import logo from '../assets/logo.png'
import rel from '../assets/banner.png'
import rel2 from '../assets/banner2.gif'
import rel5 from '../assets/banner5.gif'
import rel3 from '../assets/banner3.gif'
import rel4 from '../assets/banner4.gif'
import rel6 from '../assets/webview.gif'
import team from '../assets/team.png'
import team2 from '../assets/team2.png'
import team3 from '../assets/team3.png'
import team4 from '../assets/team4.png'
import team5 from '../assets/team5.png'
import team6 from '../assets/team6.png'
import team7 from '../assets/team7.png'
import team8 from '../assets/docker.png'
import msg from '../assets/msg.png'
import b1 from '../assets/logos-fq.png'
import b2 from '../assets/holla-group-logo-02@2x.png'
import b3 from '../assets/joy_u.png'
import b4 from '../assets/meitian.png'
import b5 from '../assets/u16.png'
import b6 from '../assets/zhongjiao.png'
import b7 from '../assets/zhijing.png'
import b8 from '../assets/liandongyun.jpg'
import {useRouter} from "vue-router";

const router = useRouter()
</script>
<template>
  <el-backtop target=".demo-tree-scrollbar .el-scrollbar__wrap"></el-backtop>
  <el-scrollbar class="demo-tree-scrollbar" style="height: 100%">
    <div class="back">
      <h1>开源的云真机测试平台</h1>
      <h5 style="color: #909399">Sonic，一站式开源分布式集群云真机测试平台，致力服务于中小企业的客户端UI测试（永久免费）</h5>
      <a href="https://github.com/ZhouYixun" target="_blank"><img
          src="https://img.shields.io/github/stars/ZhouYixun?affiliations=OWNER&style=social"/></a>
      <a href="https://hub.docker.com/u/zhouyixun" target="_blank" style="margin-left: 20px"><img
          src="https://img.shields.io/badge/docker%20pulls-7k%2B-blue"/></a>
      <div style="padding: 0 20%;">
        <el-divider><span style="color: #606266">For Tester，For Free，Forever</span></el-divider>
      </div>
      <el-carousel style="margin-top: 60px" height="550px" indicator-position="outside" :interval="4000">
        <el-carousel-item>
          <div
              :style="'background:linear-gradient(to bottom right, rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.9)) ,url('+rel+');background-size:cover;height:100%;'"
              class="banner">
            <div>
              <h1 style="color: aliceblue">Sonic云真机测试平台v1.1.0已发布！</h1>
              <h3 style="color: aliceblue">远控优化、在线webView调试等等新功能登场</h3>
              <el-button size="small" type="primary" @click="router.push('/Version')">查看新特性</el-button>
            </div>
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <div
              :style="'background:linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.7)) ,url('+rel6+');background-size:cover;height:100%'"
              class="banner2">
            <div style="position: absolute;right: 30px">
              <el-card>
                <h3 style="color:#606266 ">在线调试webView</h3>
                <h3 style="color:#606266 ">支持谷歌内核所有webView</h3>
              </el-card>
            </div>
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <div
              :style="'background:linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.7)) ,url('+rel5+');background-size:cover;height:100%'"
              class="banner2">
            <div style="position: absolute;right: 30px">
              <el-card>
                <h3 style="color:#606266 ">一键远控设备</h3>
                <h3 style="color:#606266 ">投屏、触控、物理按键</h3>
              </el-card>
            </div>
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <div
              :style="'background:linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.7)) ,url('+rel2+');background-size:cover;height:100%'"
              class="banner2">
            <div style="position: absolute;right: 30px">
              <el-card>
                <h3 style="color:#606266 ">实时获取控件信息</h3>
                <h3 style="color:#606266 ">可视化UI自动化</h3>
              </el-card>
            </div>
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <div
              :style="'background:linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.3)) ,url('+rel3+');background-size:cover;height:100%'"
              class="banner2">
            <div style="position: absolute;top: 30px">
              <el-card>
                <h3 style="color:#606266 ">图像识别一键搞定</h3>
                <h3 style="color:#606266 ">三种算法自动匹配</h3>
              </el-card>
            </div>
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <div
              :style="'background:linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.7)) ,url('+rel4+');background-size:cover;height:100%'"
              class="banner2">
            <div style="position: absolute;bottom: 30px">
              <el-card>
                <h3 style="color:#606266 ">拖拽排序，随心所欲</h3>
              </el-card>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>

      <div style="margin-top: 60px">
        <h1>
          他们都在用
        </h1>
      </div>
      <div style="padding: 0 20%;">
        <el-divider><span style="color: #909399">期待您的加入（排名不分先后）</span></el-divider>
      </div>
      <div style="display: flex;justify-content: center;align-items: center;">
        <img :src="b1" height="80" style="margin-right: 80px"/>
        <img :src="b4" height="130" style="margin-right: 60px"/>
        <img :src="b8" height="130" style="margin-right: 60px"/>
        <img :src="b2" height="30"/>
      </div>
      <div style="display: flex;justify-content: center;align-items: center;margin-top: 20px">
        <img :src="b5" height="70" style="margin-right: 80px"/>
        <img :src="b3" height="65" style="margin-right: 80px"/>
        <img :src="b7" height="65" style="margin-right: 80px"/>
        <img :src="b6" height="40"/>
      </div>

      <div style="margin-top: 80px">
        <h1>
          为什么使用Sonic？
        </h1>
      </div>
      <div style="padding: 0 20%;">
        <el-divider></el-divider>
      </div>

      <el-row :gutter="30">
        <el-col :span="6">
          <el-card shadow="hover">
            <img :src="team4" height="40"/>
            <h3>0编码UI自动化</h3>
            <p>用户自定义</p>
            <p>自研随机事件、UI遍历</p>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <img :src="team" height="40"/>
            <h3>用例管理</h3>
            <p>用例管理不同步骤</p>
            <p>一键分发多设备任务</p>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <img :src="team2" height="40"/>
            <h3>设备分布式集群</h3>
            <p>支持跨网段多机房</p>
            <p>支持Windows、Mac、Linux平台</p>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <img :src="team3" height="40"/>
            <h3>周边生态</h3>
            <p>安卓插件服务</p>
            <p>Jenkins持续集成插件</p>
          </el-card>
        </el-col>
        <el-col :span="6" style="margin-top: 20px">
          <el-card shadow="hover">
            <img :src="team5" height="40"/>
            <h3>低成本维护</h3>
            <p>拖拽式排序交互</p>
            <p>使用简单便捷</p>
          </el-card>
        </el-col>
        <el-col :span="6" style="margin-top: 20px">
          <el-card shadow="hover">
            <img :src="team6" height="40"/>
            <h3>公共步骤</h3>
            <p>自定义使用时机</p>
            <p>可复用步骤一键封装</p>
          </el-card>
        </el-col>
        <el-col :span="6" style="margin-top: 20px">
          <el-card shadow="hover">
            <img :src="team7" height="40"/>
            <h3>可视化报表</h3>
            <p>测试截图、日志、录像</p>
            <p>图表展示项目运行情况</p>
          </el-card>
        </el-col>
        <el-col :span="6" style="margin-top: 20px">
          <el-card shadow="hover">
            <img :src="team8" height="40"/>
            <h3>轻松部署维护</h3>
            <p>Docker一键去中心化分布式</p>
            <p>扩容缩容不再繁琐</p>
          </el-card>
        </el-col>
      </el-row>

      <div style="margin-top: 60px">
        <h1>
          Sonic方案与产出
        </h1>
      </div>
      <div style="padding: 0 20%;">
        <el-divider></el-divider>
      </div>
      <div style="display: flex;justify-content: center; margin-top: 50px">
        <img :src="msg" height="300"/>
        <el-timeline style="text-align: left">
          <el-timeline-item
              type="primary"
              :hollow="true"
          >
            Sonic提供图像识别，后续还会添加poco控件，助力游戏公司测试效率。
          </el-timeline-item>
          <el-timeline-item
              type="primary"
              :hollow="true"
          >
            使用Sonic进行跨网段部署，助力海外业务的公司进行专项检测。
          </el-timeline-item>
          <el-timeline-item
              type="primary"
              :hollow="true"
          >
            提供定时任务充分利用无人值守时间回归UI测试，省时省力。
          </el-timeline-item>
          <el-timeline-item
              type="primary"
              :hollow="true"
          >
            自研随机事件测试与UI遍历测试，为您的APP产品质量保驾护航。
          </el-timeline-item>
          <el-timeline-item
              type="primary"
              :hollow="true"
          >
            支持打通Jenkins的DevOps流程，推进项目自动化流程。
          </el-timeline-item>
          <el-timeline-item
              type="primary"
              :hollow="true"
          >
            超低的使用门槛，超便捷的维护方式，趣味交互让用户不再感到繁琐。
          </el-timeline-item>
          <el-timeline-item
              type="primary"
              :hollow="true"
          >
            丰富图表展示，用户实时洞察用例执行情况，把控产品质量。
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>

    <div style="margin-top: 60px">
      <h1>
        还等什么？马上开始吧！
      </h1>

      <div>
        <el-button type="primary" size="large" @click="router.push('/Deploy')">马上使用</el-button>
      </div>
    </div>

    <el-footer style="margin-top: 75px">
      <el-divider></el-divider>
      <div style="display: flex;justify-content: center;align-content: center;margin-top: 25px">
        <img :src="logo" width="20"/> <span style="margin-left: 10px;font-size: 14px;color: #606266">Copyright © All Rights Reserved Sonic Project for ZhouYixun 版权所有</span>
      </div>
    </el-footer>
  </el-scrollbar>
</template>